<template>
  <div class="h-full flex flex-col">
    <div class="flex-1 overflow-auto">
      <div>Home</div>
      <div>用户信息: {{ userInfos }}</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/store/user';

  const currentPage = ref(1)
  const pageSize = ref(10)

  const userStores = useUserInfo();

  const { userInfos } = storeToRefs(userStores);
  

  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ];

  const handleSizeChange = (val: number) => {
    pageSize.value = val
  }

  const handleCurrentChange = (val: number) => {
    currentPage.value = val
  }
</script>

<style scoped></style>
